<template>
  <div class="disease-filter">
    <el-card>
      <div class="disease-levels">
        <div class="level-section">
          <h3>一类疾病</h3>
          <div class="disease-items">
            <el-card v-for="item in level1Data" :key="item.id" class="disease-item" @click="handleLevel1Select(item)">
              <h4>{{ item.name }}</h4>
            </el-card>
          </div>
        </div>

        <div class="level-section" v-show="selectedLevel1">
          <h3>二类疾病</h3>
          <div class="disease-items">
            <el-card v-for="item in level2Data" :key="item.id" class="disease-item" @click="handleLevel2Select(item)">
              <h4>{{ item.name }}</h4>
            </el-card>
          </div>
        </div>

        <div class="level-section" v-show="selectedLevel2">
          <h3>三类疾病</h3>
          <div class="disease-items">
            <el-card v-for="item in level3Data" :key="item.id" class="disease-item">
              <h4>{{ item.name }}</h4>
            </el-card>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElCard, ElTable, ElTableColumn } from 'element-plus';

// 各级数据
const level1Data = ref([]);
const level2Data = ref([]);
const level3Data = ref([]);

// 选中的数据
const selectedLevel1 = ref(null);
const selectedLevel2 = ref(null);

// 模拟获取一级分类数据
const fetchLevel1Data = () => {
  level1Data.value = [
    { id: 1, name: '内科疾病', description: '内科相关疾病分类' },
    { id: 2, name: '外科疾病', description: '外科相关疾病分类' },
    { id: 3, name: '儿科疾病', description: '儿科相关疾病分类' }
  ];
};

// 模拟获取二级分类数据
const fetchLevel2Data = (parentId) => {
  level2Data.value = [
    { id: 1, name: `${selectedLevel1.value.name}-子分类1`, description: '子分类描述1' },
    { id: 2, name: `${selectedLevel1.value.name}-子分类2`, description: '子分类描述2' },
    { id: 3, name: `${selectedLevel1.value.name}-子分类3`, description: '子分类描述3' }
  ];
};

// 模拟获取三级分类数据
const fetchLevel3Data = (parentId) => {
  level3Data.value = [
    { id: 1, name: `${selectedLevel2.value.name}-详细分类1`, description: '详细分类描述1' },
    { id: 2, name: `${selectedLevel2.value.name}-详细分类2`, description: '详细分类描述2' },
    { id: 3, name: `${selectedLevel2.value.name}-详细分类3`, description: '详细分类描述3' }
  ];
};

// 处理一级分类选择
const handleLevel1Select = (row) => {
  selectedLevel1.value = row;
  selectedLevel2.value = null;
  level2Data.value = [];
  level3Data.value = [];
  fetchLevel2Data(row.id);
};

// 处理二级分类选择
const handleLevel2Select = (row) => {
  selectedLevel2.value = row;
  level3Data.value = [];
  fetchLevel3Data(row.id);
};

// 监听选中数据变化
watch(selectedLevel1, (newVal) => {
  if (!newVal) {
    level2Data.value = [];
    level3Data.value = [];
    selectedLevel2.value = null;
  }
});

watch(selectedLevel2, (newVal) => {
  if (!newVal) {
    level3Data.value = [];
  }
});

// 初始化
fetchLevel1Data();
</script>

<style lang="scss" scoped>
.disease-filter {
  padding: 10px;

  .el-card {
    margin-bottom: 10px;
  }

  .disease-levels {
    .level-section {
      margin-bottom: 15px;

      h3 {
        margin-bottom: 10px;
        color: #333;
        font-weight: 600;
      }

      .disease-items {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: thin;
        scrollbar-color: #409EFF #f0f2f5;

        &::-webkit-scrollbar {
          height: 6px;
        }

        &::-webkit-scrollbar-track {
          background: #f0f2f5;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #409EFF;
          border-radius: 3px;
        }

        .disease-item {
          flex: 0 0 180px;
          cursor: pointer;
          transition: all 0.3s ease;
          padding: 8px;

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 2px 8px 0 rgba(0,0,0,.1);
          }

          h4 {
            margin: 0;
            color: #409EFF;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>